<template>
	<view class="content" :class="{'background': DataList.length > 0}">
		<view v-if="DataList.length == 0" class="top-View">
			<view class="home-bar" :style="{ height: statusBarHeight + titleBarHeight + 'px' }">
				<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
				<view :style="{ height: titleBarHeight + 'px' }" class="bar-content">
					<view class="loaction" @click="setUrl">
						<image src="../../static/img/tjzw.png" mode=""></image>
						<view class="text">添加宠物</view>
					</view>
				</view>
			</view>
			<!-- <view class="top-title">
				<view class="loaction" @click="setUrl">
					<image src="../../static/img/tjzw.png" mode=""></image>
					<view class="text">添加宠物</view>
				</view>
			</view> -->
			<view class="popup" v-if="show">
				<view class="popup-text" @click="setTips">
					<span>快来为宠物创建专属的社交账号吧</span>
					<u-icon name="close" color="#FF9A00" style="margin-left: 30rpx;" size="28"></u-icon>
				</view>
				<view class="triangle-up"></view>
			</view>
			<view class="nonempty" v-if="DataList.length == 0">
				<span>你还没有宠物</span>
				<span>快去添加吧~</span>
			</view>
		</view>
		<view v-if="DataList.length > 0" class="top-View">
			<!-- <view class="top-title" :style="{  height: statusBarHeight + titleBarHeight + 'px' }">
				<view class="loaction2" @click="cutPet" :style="[topStyle]">
					<image src="../../static/img/qiehuan.png" mode=""></image>
					<view class="text">切换宠物</view>
				</view>
				<view class="title-center">
					<span style="font-size: 30rpx;font-weight: bold;color: #333333;">{{DataList[dataIndex].name}}</span>
					<span style="color: #999999;font-size: 22rpx;">Pid：{{DataList[dataIndex].pid}}</span>
				</view>
			</view> -->
			<view class="home-bar" :style="{ height: statusBarHeight + titleBarHeight + 'px' }">
				<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
				<view :style="{ height: titleBarHeight + 'px' }" class="bar-content">
					<view class="loaction2" @click="cutPet">
						<image src="../../static/img/qiehuan.png" mode=""></image>
						<view class="text">切换宠物</view>
					</view>
					<view class="content-info" v-if="TopShow">
						<view class="info-nickname">{{DataList[dataIndex].name}}</view>
						<view class="info-pid">Pid: {{DataList[dataIndex].pid}}</view>
					</view>
				</view>
			</view>
		</view>
		<home :dataPid="dataPid" :dataPage="dataPage" :style="!dataPid?'display: none':'display: block'"></home>
	</view>
</template>

<script>
	import home from './components/home.vue'
	let systemInfo = uni.getSystemInfoSync();
	let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
	export default {
		components:{
			home
		},
		data() {
			return {
				show: false,
				DataList: [],
				dataPid: undefined,
				dataIndex: undefined,
				dataPage: 1,
				statusBarHeight: 0,
				titleBarHeight: 0,
				TopShow: false
			};
		},
		onPullDownRefresh() {
			this.dataPage = 0
			this.getData()
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom: function() {
			console.log('触发拉')
			this.dataPage += 1
		},
		methods: {
			cutPet(){
				uni.navigateTo({
					url: '../../myPackageA/pet/myPet/myPet'
				})
			},
			setUrl(){
				if(this.DataList.length >= 2){
					uni.showToast({
						title: '最多添加两个宠物哦~',
						duration:500,
						icon:'none'
					})
				}else{
					uni.navigateTo({
						url: '../../myPackageA/pet/addPet/addPet'
					})
				}
			},
			click(index, index1) {  //index是列的下标，index1是每行的第下标个按钮
				if(index1 == 1) {
					this.$request(this.commonApi.petDelete+this.DataList[index].pid,'GET').then(res=>{
						uni.showToast({
							title: '删除成功',
							duration:500,
							icon:'none'
						})
						this.getData()
					})
				} else {
					uni.navigateTo({
						url: '../../myPackageA/pet/addPet/addPet?id='+this.DataList[index].id+'&pid='+this.DataList[index].pid
						// url: './addPet/addPet?id='+this.DataList[index].id+'&pid='+this.DataList[index].pid
					})
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.DataList[index].show = true;
				this.DataList.map((val, idx) => {
					if(index != idx) this.DataList[idx].show = false;
				})
			},
			getData() {
				const uid = uni.getStorageSync('uid');
				let self = this;
				self.$request(self.commonApi.petList + uid, 'GET', {}).then(res => {
					console.log(res.data.data)
					self.DataList = res.data.data;
					self.DataList.forEach((item,index)=>{
						item.show = false
						if(item.main == 1){
							self.dataPid = item.pid
							self.dataIndex = index
							uni.setStorageSync('petName2',item.name)
							self.dataPage += 1
						}
					})
				});
			},
			setTips(){
				let tips = uni.setStorageSync('tips',2)
				if(tips == 1){
					this.show = true
				}else{
					this.show = false
				}
			}
		},
		onShow() {
			let token = uni.getStorageSync('token')
			if (!token) {
				uni.navigateTo({
					url:'/myPackageA/user/login/index'
				})
				return false
			}
			let petNames = uni.getStorageSync('petName')
			let petName2 = uni.getStorageSync('petName2')
			if(petNames){
				if(petName2 != petNames){
					console.log('不一样执行到这')
					uni.startPullDownRefresh({
						success:(res=>{
							this.dataPage += 1
							this.getData()
							if(this.DataList.length > 0) {
								this.dataPage = 1
								setTimeout(()=>{
									uni.stopPullDownRefresh();
								},1000)
							}
						})
					})
				}
			}
			this.getData()
			let tips = uni.getStorageSync('tips')
			if(tips == 1){
				this.show = true
			}else{
				this.show = false
			}
			this.TopShow = true
		},
		onLoad() {
			if (systemInfo.model.indexOf('iPhone') !== -1) {
			  this.titleBarHeight = 44
			} else {
			  this.titleBarHeight = 48
			}
			this.statusBarHeight = systemInfo.statusBarHeight
		}
	};
</script>

<style lang="scss" scoped>
	.triangle-up {
	    width: 0;
	    height: 0;
	    border-left: 10rpx solid transparent;
	    border-right: 10rpx solid transparent;
	    border-bottom: 10rpx solid rgba(254, 165, 0, 0.12);
		position: absolute;
		bottom: 0;
		left: 40rpx;
		z-index: 999;
	}
	.home-bar {
		position: sticky;
		top: 0;
		z-index: 999;
		font-size: 28rpx;
		font-weight: 600;
		width: 750rpx;
		background-color: #fff;
		.bar-content {
			width: 100%;
			display: flex;
			align-items: center;
			position: relative;
			.content-info {
				text-align: center;
				position: absolute;
				left: 325rpx;
				.info-nickname {
					font-size: 32rpx;
					font-weight: 700;
					color: #333333;
					line-height: 44rpx;
				}
				.info-pid {
					font-size: 22rpx;
					font-weight: 400;
					color: #999999;
					line-height: 32rpx;
				}
			}
		}
	}
	.loaction2{
		height: 30rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		z-index: 1000;
		position: absolute;
		left: 30rpx;
		image{
			display: block;
			width: 35rpx !important;
			height: 30rpx !important;
			margin-right: 15rpx !important;
			flex: 1 !important;
		}
	}
	.loaction {
		display: flex;
		align-items: center;
		flex-direction: row;
		position: absolute;
		z-index: 1;
		// top: 92rpx;
		left: 30rpx;
		image{
			width: 50rpx !important;
			height: 46rpx !important;
			margin-right: 20rpx !important;
			flex: 1 !important;
		}
	}
	.top-View{
		position: sticky !important;
		top: 0 !important;
		z-index: 1000 !important;
	}
	.top-title {
		width: 100%;
		display: flex;
		align-items: center;
		background: white;
		position: relative;
	}
	.title-center{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		// position: absolute;
		// bottom: 0;
		// z-index: 10;
	}
	.popup-text{
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		font-size: 28rpx;
		color: #FF9A00;
		padding: 15rpx 25rpx;
		background: #FFF4E0;
		border-radius: 15rpx;
		top: 0;
		left: 20rpx;
		z-index: 2;
	}
	.popup{
		position: relative;
	}
	.nonempty{
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		font-size: 32rpx;
		color: #999999;
		font-weight: bold;
	}
	image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}
	
	.title {
		text-align: left;
		font-size: 28rpx;
		color: $u-content-color;
		margin-top: 20rpx;
	}
	.content {
		width: 100%;
		display: flex;
		height: 100%;
		flex-direction: column;
	}
	.background {
		background-color: #fff;
	}
</style>